<template>
	<div>
		<div class="box">
			<div class="title">
				<span class="tag"></span>
				租金调整-保险
			</div>
			<AForm
				ref="form2"
				v-model="formData.subsequentData"
				:config="formList2"
				:state="state"></AForm>

			<div class="insurance">
				<div class="insurancetitle">商业险险种</div>
				<div class="insurancelist">
					<el-form
						v-if="formData.subsequentData"
						:model="formData.subsequentData"
						ref="form"
						:hide-required-asterisk="true"
						size="normal">
						<ATable
							:state="state"
							model="insuranceList"
							:config="tableColumns"
							:header-cell-class-name="setHeaderCellName"
							v-model="formData.subsequentData.insuranceList">
							<template #handler="scope">
								<div>
									<el-checkbox
										v-if="scope.row.operationType == '2'"
										true-label="1"
										false-label="2"
										v-model="scope.row.selectedType"
										:disabled="
											formData.insuranceStandardType !==
											'4'
										"></el-checkbox>
									<div v-else>
										<el-button
											type="text"
											@click="
												remove_insuranceList(
													scope.$index,
													scope.row,
												)
											">
											删除
										</el-button>
									</div>
								</div>
							</template>
						</ATable>
					</el-form>
					<el-button
						v-if="state !== 'disabled' && state !== 'readonly'"
						class="btn"
						plain
						type="primary"
						size="default"
						@click="push_insuranceList"
						icon="el-icon-plus">
						增加其他商业险种
					</el-button>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import AForm from '@/components/A/A-form/form/index.vue';
	import ATable from '@/components/A/A-form/table/index.vue';
	import { log } from 'mathjs';
	export default {
		name: '',
		components: { AForm, ATable },
		props: {
			value: {
				type: Object,
				default: () => {
					return {};
				},
			},
			state: {
				required: false,
			},
		},
		dicts: [
			'in_su_rance_com_pany',
			'quota_insurance_standard_type',
			'pro_duct_in_sur_ance_a',
			'pro_duct_in_sur_ance_b',
			'pro_duct_in_sur_ance_c',
		],
		data() {
			return {};
		},
		inject: ['dictList_provide'],
		computed: {
			formData: {
				get() {
					return this.useVModel.call(this);
				},
				set(val) {
					this.$emit('input', val);
				},
			},
			formList2() {
				return [
					{
						label: '购买类型',
						prop: 'insuranceBuyType',
						type: 'radioGroup',
						dict: {
							list: this.insuranceBuyTypeList,
						},
						on: {
							change: ({ val, row }) => {
								row.insuranceBuyModeType = undefined;
							},
						},
					},
					{
						label: '购买方式',
						prop: 'insuranceBuyModeType',
						type: 'radioGroup',
						dict: {
							list: this.insuranceBuyModeType,
						},
					},
					{
						label: '保险公司',
						prop: 'insuranceCompanyKey',
						type: 'select',
						dict: {
							list: this.dict.type.in_su_rance_com_pany,
						},
						on: {
							change: ({ val, row, item }) => {
								row.insuranceCompanyVal = item.value.label;
							},
						},
					},
					{
						label: '保险标准',
						prop: 'insuranceStandardType',
						type: 'radioGroup',
						dict: {
							list: this.dict.type.quota_insurance_standard_type,
						},
						on: {
							change: ({ val, row, item }) => {
								this.initDetaultInsuranceList(val.value);
							},
						},
					},
				];
			},
			dictList_dict() {
				return this.dictList_provide();
			},
			insuranceBuyTypeList() {
				let arr = [];
				arr.push({
					value: '1',
					label: '首年',
				});
				arr.push({
					value: '2',
					label: '合同租期',
				});
				arr.push({
					value: '3',
					label: '客户购买',
				});
				return arr;
			},
			insuranceBuyModeType() {
				return [
					{
						value: '1',
						label: '我司购买',
					},
					{
						value: '2',
						label: '店保',
					},
					{
						value: '3',
						label: '客户自购',
					},
				];
			},
			tableColumns() {
				return [
					{
						label: '操作',
						// columnSlot: 'handle',
						prop: 'selectedType',
						slot: 'handler',
						type: 'empty',
						prototype: {
							trueLabel: '1',
							falseLabel: '2',
						},
						lifeHooks: {
							watch: {
								handler: ({ val, row }) => {
									if (row.isCoverageAmount == 0) {
										if (row.selectedType == 1) {
											this.$set(
												row,
												'sumInsuredVal',
												'加入',
											);
										} else {
											this.$set(
												row,
												'sumInsuredVal',
												'未加入',
											);
										}
									}
								},
								immediate: true,
							},
						},
					},
					{
						label: '险种',
						prop: 'insuranceItemNameVal',
						type: ({ row }) => {
							if (row.operationType == '2') {
								return 'text';
							} else {
								return 'input';
							}
						},
						rules: true,
					},
					{
						label: '保额',
						prop: 'sumInsuredVal',
						type: ({ row }) => {
							if (row.operationType == '1') {
								return 'price';
							}
							if (
								this.formData.subsequentData
									.insuranceStandardType == '4'
							) {
								// 自定义
								if (row.isCoverageAmount == '1') {
									return 'select';
								} else {
									return 'text';
								}
							} else {
								// 套餐
								return 'text';
							}
						},
						dict: {
							list: ({ row }) => {
								let arr = [];
								if (Array.isArray(row.coverageAmountList)) {
									arr = row.coverageAmountList;
								} else if (
									row.isCoverageAmount == '1' &&
									typeof str == 'string' &&
									this.notEmpty(str)
								) {
									arr = JSON.parse(row.coverageAmountList);
								}
								return arr;
							},
						},
						rules: true,
					},
				];
			},
		},
		created() {},
		mounted() {},
		methods: {
			push_insuranceList() {
				if (
					!Array.isArray(this.formData.subsequentData.insuranceList)
				) {
					this.$set(
						this.formData.subsequentData,
						'insuranceList',
						[],
					);
				}
				let obj = {
					insuranceItemNameKey: '',
					insuranceItemNameVal: '',
					selectedType: '1',
					operationType: '1',
					irrespectiveType: '1',
					sumInsuredVal: undefined,
					isCoverageAmount: '1',
					coverageAmountList: [],
				};
				this.formData.subsequentData.insuranceList.push(obj);
			},
			remove_insuranceList(index, row, scope) {
				this.$confirm(
					`此操作将删除 ${
						row?.insuranceItemNameVal
							? row?.insuranceItemNameVal + '险种'
							: '该险种'
					}, 是否继续?`,
					'提示',
					{
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning',
					},
				)
					.then(() => {
						this.formData.subsequentData.insuranceList.splice(
							index,
							1,
						);
					})
					.catch(() => {});
			},
			initDetaultInsuranceList(type) {
				let list = [];
				switch (type) {
					case '1':
						list = this.dict.type.pro_duct_in_sur_ance_a;
						break;
					case '2':
						list = this.dict.type.pro_duct_in_sur_ance_b;
						break;
					case '3':
						list = this.dict.type.pro_duct_in_sur_ance_c;
						break;
				}
				let insuranceList = [];
				if (type != '4') {
					this.dictList_dict.insuranceList?.map(e => {
						let item = list.find(item => {
							return (
								item.label?.trim() ==
								e.insuranceItemName?.trim()
							);
						});
						if (item) {
							insuranceList.push({
								...e,
								insuranceItemNameKey: e.insuranceItemId,
								insuranceItemNameVal: e.insuranceItemName,
								isCoverageAmount:
									e.isCoverageAmount?.toString(),
								// coverageAmountList: JSON.stringify(e.coverageAmountList),
								selectedType: '1',
								operationType: '2',
								// irrespectiveType: '1' // 不计免赔
								sumInsuredVal: item?.raw?.remark?.trim() * 1,
							});
						}
					});
				} else {
					insuranceList = this._.cloneDeep(
						this.dictList_dict.insuranceList,
					);
					insuranceList.forEach(item => {
						item.selectedType = '1';
						item.operationType = '2';
						item.insuranceItemNameKey = item.insuranceItemId;
						item.insuranceItemNameVal = item.insuranceItemName;
						item.isCoverageAmount =
							item.isCoverageAmount?.toString();
					});
				}

				this.$set(
					this.formData.subsequentData,
					'insuranceList',
					insuranceList,
				);
			},
			setHeaderCellName({ columnIndex }) {
				if (this.state == 'readonly') {
					return '';
				}
				if (columnIndex !== 0 && columnIndex !== undefined) {
					return 'ruleHeaderCell';
				}
			},
			setDefaultData() {
				for (const key in this.formList2) {
					if (Object.hasOwnProperty.call(this.formList2, key)) {
						this.formData.subsequentData[key] =
							this.formData.previousData[key];
					}
				}
				this.formData.subsequentData.insuranceList =
					this.formData.previousData.insuranceList;
			},
		},
		beforeDestroy() {
			this.setDefaultData();
		},
	};
</script>

<style lang="scss" scoped>
	.box {
		border-radius: 8px;
		background-color: #fff;
		.title {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 500;
			color: #333333;
			line-height: 22px;
			padding-top: 15px;
			padding-bottom: 15px;
			// border-bottom: 1px solid #e9e9e9;
			display: flex;
			align-items: center;
			.tag {
				width: 8px;
				height: 8px;
				background-color: #1890ff;
				border-radius: 100%;
				margin-right: 10px;
			}
			.price {
				font-size: 14px;
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				color: #1890ff;
				line-height: 20px;
				margin-left: 20px;
			}
		}
	}
	.insurance {
		background-color: #f7fbff;
		border-radius: 4px;
		padding: 16px;
		margin-top: 15px;
		.insurancetitle {
			font-size: 14px;
			font-family: PingFangSC, PingFang SC;
			font-weight: 400;
			color: #464646;
			line-height: 22px;
			padding-bottom: 10px;
		}
	}

	.btn {
		margin-top: 15px;
		width: 100%;
	}
</style>
